<template>
	<z-paging
		show-refresher-when-reload
		show-refresher-update-time
		class="app app-bg"
		v-model="list"
		ref="paging"
		@query="queryList"
	>
		<view
			class="log"
			slot="top"
			@tap="vk.navigateTo('/pages/user/setting/update-account')"
		>
			添加账号
		</view>
		<u-swipe-action
			v-for="(item, index) in list"
			:index="index"
			:key="item.id"
			:show="item.show"
			:options="options"
			@click="click"
		>
			<view class="item" @tap="update(item)">
				<text>{{ arr[item.type] }}</text>
				<text class="text">账号: {{ item.account || item.number }}</text>
				<u-icon
					v-if="select._id == item._id"
					name="checkmark-circle-fill"
					color="#3AB54A"
					size="40"
				></u-icon>
			</view>
		</u-swipe-action>
		<view class="end" slot="bottom" v-if="show && list.length > 0">
			<view class="btn" :class="{ dis: !select._id }" @tap="confirm">确认</view>
		</view>
	</z-paging>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			options: [
				{ text: "删除", style: { backgroundColor: "#FF4949", fontSize: "24rpx" } }
			],
			select: {},
			arr: ["支付宝账号", "银行卡账户", "微信"],

			show: false
		}
	},
	onLoad(opt) {
		this.show = opt.from == "select" ? true : false
	},
	onShow() {
		if (this.$refs.paging) this.$refs.paging.reload()
	},
	methods: {
		// 查询列表
		queryList(pageIndex, pageSize) {
			vk.callFunction({
				url: "shifu/user.queryShifuAccount",
				data: { pageSize, pageIndex }
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 编辑
		update(item) {
			if (this.show) {
				this.select = item
				return
			}
			vk.navigateTo({
				url: "/pages/user/setting/update-account",
				success: res => {
					res.eventChannel.emit("data", item)
				}
			})
		},
		// 删除
		remove(e) {
			vk.callFunction({
				url: "shifu/user.removeShifuAccount",
				title: "删除中...",
				data: { aid: e._id }
			}).then(() => {
				this.$refs.paging.reload()
			})
		},
		// 确认
		confirm() {
			if (!this.select._id) return
			uni.$emit("select", this.select)
			vk.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.log {
	padding: 16rpx 20rpx 20rpx 0;
	color: #3ab54a;
	text-align: right;
}

.add {
	height: 80rpx;
	border-radius: 44rpx;
	background-color: #3ab54a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 28rpx;
	right: 28rpx;
	top: 50%;
	transform: translateY(-50%);
}

.item {
	height: 124rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f5f5f5;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 30rpx;
	padding: 0 30rpx;
	position: relative;
	.text {
		font-weight: normal;
		font-size: 24rpx;
		color: #999999;
		padding: 10rpx 0 0 2rpx;
	}
	.u-icon {
		position: absolute;
		right: 30rpx;
	}
}

.end {
	padding: 16rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 -6rpx 26rpx rgba(0, 0, 0, 0.08);
	.btn {
		color: #fff;
		height: 72rpx;
		border-radius: 50rpx;
		background-color: #3ab54a;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dis {
		opacity: 0.5;
	}
}
</style>
